<template>
  <div>
    <!-- <h1>明星钓友</h1> -->
    <van-nav-bar title="明星钓友" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- list热门主题 -->
    <div class="title">附近的明星钓友</div>
    <!-- 动态绑定显示更多内容v-for -->
    <div class="list" :value="list" v-for="(item,index) in list" :key="index" @click="sh(item.focusId)">
      <!-- 动态获取数据 -->
      <div class="item">
        <div class="icon">
          <van-image
            width="4rem"
            height="4rem"
            round
            fit="cover"
            :src="item.touXiang"
          />
          <!-- <img src="static/images/QQ.png" class="img" /> -->
        </div>
        <div class="content">
          <div class="type">{{item.userName}}</div>
          <!-- 标签 -->
          <div class="span">{{item.address}}</div>
        </div>
        <div class="num1">
          <div>{{item.fansCount}}</div>
          <div>发帖数</div>
        </div>
        <div class="num2">
          <div>{{item.focusCount}}</div>
          <div>关注者</div>
        </div>
      </div>
    </div>
    <div class="title">活跃的明星钓友</div>
    <div  v-for="(item,index) in list" :key="index" @click="sh(item.focusId)">
    <div class="list">
      <div class="item">
        <div class="icon">
          <img :src="item.touXiang" class="img" />
        </div>
        <div class="content">
          <div class="type">野钓传统军</div>
          <div class="datail">野钓的魅力在于你永远不知道钓上啥鱼</div>
        </div>
        <div class="num">今日:{{item.focusCount}}</div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
// axios引入,获取数据
import axios from 'axios';
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.post('/api/getStarts',{}).then(res => {
      console.log(res.data.data);
      this.list = res.data.data
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'forum'
      });
    },
    sh(id){
      this.$router.push({
        name:'名片',
        query:{
          ic:id
        }
      })
    }
  }
};
</script>
<style scoped>
/* css样式 */
.title {
  /* padding: 1.2rem; */
  font-weight: 600;
}
.list {
  display: flex;
  flex-direction: column;
}
.item {
  display: flex;
  margin: 1rem;
  flex-direction: row;
  /* justify-content: space-evenly; */
}
.type {
  /* font-size: 1.5rem; */
  font-weight: 500;
}
.img {
  width: 3rem;
  height: 3rem;
  /* padding-top: 6rem; */
  vertical-align: middle;
}
.content {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; */
}
.tag {
  width: 3rem;
}
.datail,
.num1,
.num2,
.span {
  color: gray;
}
.num1 {
  display: flex;
  margin-left: 10rem;
  flex-direction: column;
}
.num2 {
  display: flex;
  margin-left: 0.8rem;
  flex-direction: column;
}
</style>